<template>
  <div class="h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm">
      <div class="flex justify-between items-center px-4 h-16">
        <div class="flex items-center">
          <a-button
            type="text"
            class="mr-4"
            @click="collapsed = !collapsed"
          >
            <template #icon>
              <icon-menu-fold v-if="collapsed" />
              <icon-menu-unfold v-else />
            </template>
          </a-button>
          <h1 class="text-lg font-semibold">工厂设备管理系统</h1>
        </div>
        <div class="flex items-center space-x-4">
          <span class="text-gray-600">
            {{ userInfo?.realName || userInfo?.username }}
          </span>
          <a-dropdown @select="handleUserAction">
            <a-button type="text">
              <template #icon>
                <icon-user />
              </template>
            </a-button>
            <template #content>
              <a-doption value="profile">
                <template #icon><icon-user /></template>
                个人信息
              </a-doption>
              <a-doption value="logout">
                <template #icon><icon-export /></template>
                退出登录
              </a-doption>
            </template>
          </a-dropdown>
        </div>
      </div>
    </header>

    <!-- 主要内容区域 -->
    <div class="flex-1 flex overflow-hidden">
      <!-- 侧边栏 -->
      <a-menu
        :style="{ width: collapsed ? '64px' : '200px', height: '100%' }"
        :collapsed="collapsed"
        :default-selected-keys="[currentRoute]"
        @menu-item-click="handleMenuClick"
        show-collapse-button
        breakpoint="xl"
      >
        <a-menu-item key="home">
          <template #icon><icon-home /></template>
          首页
        </a-menu-item>
        <a-menu-item key="users">
          <template #icon><icon-user-group /></template>
          用户管理
        </a-menu-item>
        <a-menu-item key="roles">
          <template #icon><icon-user-group /></template>
          角色管理
        </a-menu-item>
        <a-menu-item key="equipment">
          <template #icon><icon-computer /></template>
          设备管理
        </a-menu-item>
        <a-menu-item key="device-category">
          <template #icon><icon-apps /></template>
          设备分类管理
        </a-menu-item>
        <a-menu-item key="maintenance">
          <template #icon><icon-tool /></template>
          维修管理
        </a-menu-item>
        <a-menu-item key="rental">
          <template #icon><icon-calendar /></template>
          租赁管理
        </a-menu-item>
        <a-menu-item key="inspection">
          <template #icon><icon-check-circle /></template>
          巡检管理
        </a-menu-item>
      </a-menu>

      <!-- 内容区域 -->
      <main class="flex-1 overflow-x-hidden overflow-y-auto bg-gray-50 p-6">
        <router-view></router-view>
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from '@/store'
import { Message } from '@arco-design/web-vue'
import {
  IconMenuFold,
  IconMenuUnfold,
  IconHome,
  IconUser,
  IconUserGroup,
  IconComputer,
  IconTool,
  IconCalendar,
  IconCheckCircle,
  IconExport,
  IconApps
} from '@arco-design/web-vue/es/icon'

const router = useRouter()
const route = useRoute()
const store = useStore()

// 侧边栏折叠状态
const collapsed = ref(false)

// 获取当前用户信息
const userInfo = computed(() => store.state.userInfo)

// 获取当前路由
const currentRoute = computed(() => route.name as string)

// 处理菜单点击
const handleMenuClick = (key: string) => {
  router.push({ name: key })
}

// 处理用户操作
const handleUserAction = async (key: string | number | Record<string, any> | undefined) => {
  if (key === 'logout') {
    try {
      // 清除用户状态
      store.commit('CLEAR_USER_STATE')
      Message.success('退出成功')
      await router.push('/login')
    } catch (error) {
      console.error('退出失败:', error)
      Message.error('退出失败')
    }
  } else if (key === 'profile') {
    Message.info('个人信息功能开发中...')
  }
}
</script>

<style scoped>
:deep(.arco-menu-inner) {
  border-right: 1px solid var(--color-border);
}

:deep(.arco-menu-item) {
  margin: 4px 8px;
  border-radius: 4px;
}

:deep(.arco-menu-item.arco-menu-selected) {
  background: linear-gradient(to right, #3b82f6, #4f46e5);
  color: white;
}

:deep(.arco-menu-item:hover:not(.arco-menu-selected)) {
  background-color: rgba(var(--primary-6), 0.1);
}

:deep(.arco-menu-collapse-button) {
  bottom: 8px;
  border-radius: 4px;
  margin: 0 8px;
}

:deep(.arco-dropdown-option) {
  padding: 8px 12px;
}
</style> 